<template>
    <div v-if="ttr">
        <div class="mvmiitdd">
            <div class="erer">
                <div class="bo">
                    <div class="ert">
                        <div class="h367">
                            <h3>
                               <div class="left">
                                    <span class="iconfont icon-zuoyou1" @click.stop="guan"></span>
                               </div>
                               <div class="contr">
                                    <span class="iconfont icon-logo"></span>
                               </div>
                               <div class="rigth">
                                   <span class="iconfont icon-24gl-plusCircle"></span>
                               </div>
                             </h3>
                        </div>
                        <div class="itdf" >
                            <!--   controls  -->
                            <video 
                                width="100%" height="290"
                                controls
                                v-if="mvdatas.data"
                                :src="mvdatas.data.url"
                                >
                                <!-- <source  type="video/mp4"> -->
                            </video>
                        </div>
                        <div class="gai">
                           <p>精品MV</p>
                        </div>
                    </div>
                    <div class="hoer">
                        <div class="tet">
                            <span class="iconfont icon-erji"></span>
                            <span class="iconfont icon-shoucang1" v-if="sou==1" @click="soucangmv"></span>
                            <span class="iconfont te icon-shoucang1" v-else @click="soucangmv"></span>
                            <span class="iconfont iconfont icon-pinglun1" @click="genping">
                                <!-- <svg class="icon" aria-hidden="true">
                                     <use xlink:href="#icon-pinglun"></use>
                                </svg> -->
                                <span class=""></span>
                            </span>
                            <span class="iconfont icon-icon" v-if=" danzx == 1" @click=" getdian"></span>
                            <span class="iconfont te icon-icon" v-else @click=" getdian" ></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zxc">
                <div class="went">
                    <ul>
                        <li v-for="item in mvpingsd.comments" :key="item.id">
                            <div class="myugna" >
                                <div class="topyu" >
                                    <div class="img">
                                        <van-image
                                        lazy-load
                                        :src="item.user.avatarUrl"
                                        />
                                    </div>
                                    <div class="nameto">
                                        <div class="nad">
                                            <h3>{{item.user.nickname}}<span></span></h3>
                                            <p>&nbsp;{{item.timeStr}}</p>
                                        </div>
                                        <div class="dian">
                                            <span  @click="dianzhan(item.commentId,item.liked)" :class="['iconfont','icon-icon',{'con': item.liked == true }]"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="botom">
                                  <p>
                                    {{item.content}}
                                   </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="botton">
                    <van-field
                    v-model="value"
                    center
                    clearable
                    >
                    <template #button >
                            <van-button size="small" type="primary" @click="getfa">发表评论</van-button>
                        </template>
                    </van-field>
                </div>
            </div>
           
        </div>
    </div>
</template>

<script>
import {getmvlist,getmvpinglun,getfasongpin,getmvdianzhan,getspucahng,getpingdianzhan} from "../../api/mvplay"
export default {
    props:["mvplayerId","xinshipin"],
    data(){
        return{
            mvdatas:null,
            danzx:1,
            mvpingsd:{},
            value:null,
            dataid:null,
            sou:1,
            ttr:false
        }
    },
    methods:{
        getmvidpl(){
            getmvlist({id:this.mvplayerId}).then(data=>{
                   this.mvdatas=data;
                   this.dataid=data.id
            })
        },
        getqlun(){
            getmvpinglun({
                id:this.mvplayerId
            }).then(data=>{
                console.log("mv评论",data)
                this.mvpingsd = data
            })
        },
        guan(){
            // this.mvplayerId=""
            this.$emit("getvhsow")
            // this.$router.go(-1)
          
        },
        //发送评论
        getfa(){
            console.log(this.value)
            getfasongpin({
                t:1,
                type:1,
                id: this.mvplayerId,
                content: this.value
            }).then(data=>{
                console.log(data)
            })
            this.getqlun();
            this.value=""
        },
        genping(){
             this.getqlun()
        },
        //点赞
        getdian(){
            this.danzx = this.danzx == 1 ? 2 : 1 ;
            if(this.danzx == 1){
                  getmvdianzhan({
                      t:0,
                      id:this.mvplayerId,
                      type:1
                  }).then(data=>{
                      console.log(data)
                  });
            }else{
              
                getmvdianzhan({
                      t:1,
                      type:1,
                      id:this.mvplayerId
                  }).then(data=>{
                      console.log(data)
                  });
            }
        },
        //收藏
        soucangmv(){
             this.sou = this.sou == 1 ? 2 : 1 ;
             if(this.sou==1){
                getspucahng({
                    mvid:this.mvplayerId,
                    t:0
                }).then(data=>{
                    console.log(data)
                })
             }else{
                 getspucahng({
                    // mvid : MV id
                    // t : 1 为收藏,其他为取消收藏
                    mvid:this.mvplayerId,
                    t:1
                }).then(data=>{
                    console.log(data)
                })
             }
            
        },
        //评论点赞
        dianzhan(id,liked){

            if(liked==false){
                getpingdianzhan({
                    id:this.mvplayerId,
                    cid:id,
                    t:1,
                    type:1,
                }).then(data=>{
                    console.log("点赞",data)
                })
            }else{
                 getpingdianzhan({
                    id:this.mvplayerId,
                    cid:id,
                    t:1,
                    type:1,
                }).then(data=>{
                    console.log("点赞",data)
                })
            }
           
        }
        
    },
    created(){
        this.getmvidpl()
        this.getqlun()
    },
    deactivated(){
       this.$destroy('mvplay')
    },
    watch:{
        mvplayerId(){
           if(this.mvplayerId){
               this.getmvidpl()
               this.getqlun()
               this.ttr=true;
           }else{
               this.ttr=false;
           }
        }
    }
    
}
</script>

<style lang="less">
.mvmiitdd{
    position: fixed;
     overflow-y: scroll;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    padding: 10px;
    z-index: 1000;
    box-sizing: border-box;
    background-color: #fff;
    .erer{
        width: 100%;
        height: 360px;
        .bo{
            width: 100%;
            position: fixed;
            // padding: 10px;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color:white;
            box-sizing: border-box;
            .h367{
                width: 100%;
                height: 40px;
                z-index: 100;
                background-color:rgb(240, 11, 11);
                position: relative;
                h3{
                    position:fixed;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 40px;
                     background-color:rgb(240, 11, 11);
                    padding: 10px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    div{
                        &.left{
                            width: 25%;
                            height: 100%;
                            font-size: 18px;
                            text-align: left;
                        }
                        &.contr{
                            width: 50%;
                            height: 100%;
                            text-align: center;
                        }
                        &.rigth{
                            width: 25%;
                            height: 100%;
                            font-size: 18px;
                            text-align: right;
                        }
                    }
                    span{
                        // display: block;
                        // width: 25%;
                        height: 100%;
                        text-align: center;
                        line-height: 20px;
                        &.icon-logo{
                            // width: 50%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
   
    .ert{
        width: 100%;
        top: 0;
        left: 0;
        height: 290px;
        position: relative;
        // background-color: #696969;
        .gai{
            position: absolute;
            bottom:0px;
            left: 0;
            padding: 10xp;
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: rgb(195, 196, 194);
        }
        .itdf{
        width: 100%;
        height: 250px;
        z-index: 10;
        top: 0px;
        opacity: 1;
        position: absolute;
        z-index: 10px;
      }
    }
    
        .hoer{
            height: 40px;
            // margin-top: 10px;
            width: 100%;
            border-bottom: 1px solid rgb(116, 115, 115);
            //  border-top: 1px solid rgb(116, 115, 115);
            .tet{
                width: 100%;
                height: 40px;
                color: black;
            }
            .tet{
                width: 100%;
                height: 100%;
                display: flex;
                span{
                    width: 25%;
                    height: 100%;
                    font-size: 20px;
                    display: block;
                    text-align:center;
                    line-height: 40px;
                    &.te{
                        color: red;
                    }
                }
            }

        }
    
    .zxc{
        width: 100%;
    }
    
}

.went{
    width: 100%;
    ul{
        height: 100%;
        width: 100%;
        // overflow-y: scroll;
        li{
            width: 100%;
            // height: 140px;
            padding: 10px;
            // background-color: #fafafa;
            box-sizing: border-box;
            margin-top: 10px;
            border-radius: 10px;
            .myugna{
                width: 100%;
                // height: 140px;
                .topyu{
                    width: 100%;
                    height:45px;
                    display: flex;
                    .img{
                        width: 20%;
                        height: 100%;
                        img{
                            margin: auto;
                            width: 45px;
                            height: 45px;
                            border-radius: 50%;
                        }
                    }
                    .nameto{
                        width: 80%;
                        height: 100%;
                        display: flex;
                        .nad{
                            width: 80%;
                            height: 100%;
                            font-size: 14px;
                            h3{
                                width: 100%;
                                height: 24px;
                                font-weight: 400;
                                overflow: hidden;
                            }
                            p{
                                font-size: 10px;
                            }
                        }
                        .dian{
                            width: 20%;
                            height: 100%;
                            position: relative;
                            span{
                                font-size: 24px;
                                position: absolute;
                                right: 10px;
                                &.con{
                                    color: red;
                                }
                                .icon {
                                    width: 1em;
                                    height: 1em;
                                    vertical-align: -0.15em;
                                    fill: currentColor;
                                    overflow: hidden;
                                }
                            }
                        }
                    
                    }
                }
                .botom{
                    width: 100%;
                    // height: 55%;
                    padding-left: 70px;
                    box-sizing: border-box;
                    overflow: hidden;
                    p{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.botton{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0px;
    left: 0;
    // padding: 10px;
    box-sizing: border-box;
    .van-field{
         width: 100%;
        //  border: 1px solid #ccc;
         input{
             background: #fafafa;
             height: 30px;
         }
    }
     .van-button{
             background-color: #8d8c8c;
             border: 0px;
    }
}
</style>